import React from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import './LoadingScreen.scss';

const LoadingScreen: React.FC = () => {
    return (
        <div className="loading-screen">
            <div className="loading-content">

                <div className="loading-logo">
                    <svg viewBox="0 0 100 100" className="logo-circle">
                        <circle cx="50" cy="50" r="40" className="circle-path" />
                    </svg>
                    <div className="logo-icon">
                        <LoadingOutlined />
                    </div>
                </div>

                <div className="loading-text">
                    <h2>React Blog</h2>
                    <p>探索前端的无限可能</p>
                </div>

                <div className="loading-progress">
                    <div className="progress-bar"></div>
                </div>

                <div className="loading-dots">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>

            </div>
        </div>
    );
};

export default LoadingScreen; 